import Loading from '@/base-ui/Loading'
import SongShowList from '@/base-ui/Song-show-list'
import { getSearchInfo } from '@/store/modules/searchSlice'
import { changeLoading } from '@/store/modules/themeSlice'
import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import SearchWarrper from './style'

const index = memo(() => {
   const params = useParams()
   const dispatch = useDispatch()
   useEffect(()=>{
    dispatch(getSearchInfo(params.msg))
   },[params])
   useEffect(()=>{
      setTimeout(()=>{
        dispatch(changeLoading(false))
      },300)
   })
   useEffect(()=>{
    return ()=>{
      dispatch(changeLoading(true))
    }
   },[])
   const {searchData,isLoading} = useSelector((state)=>{
    return {
      searchData:state?.search?.searchData,
      isLoading:state.theme.isLoading,
    }
   })
  return (
    <SearchWarrper>
      {
        isLoading?<Loading/>:<div>
          <div className="msg">您搜索&nbsp;"{params.msg}"&nbsp;的结果如下</div>
        <SongShowList data={searchData} />
        </div>
      }
    </SearchWarrper>
  )
})

export default index